<template>
  <el-col class="app-container" v-loading="loadings">
    <!-- 银行卡 -->
    <h5 class="titleInfo">银行卡详情</h5>
    <el-form :model="form" ref="form" disabled label-width="180px">
      <el-row>
        <el-col :span="24">
          <el-form-item label="银行卡类型">
            <el-select v-model="form.accountType" placeholder="请选择">
              <el-option
                :label="item.name"
                :value="item.value"
                v-for="item in reviewStatusList"
                :key="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <!-- 1.3.3.1办理 -->
        <div v-if="form.accountType == 2">
          <el-col :span="24">
            <el-form-item prop="dealType">
              <el-radio-group v-model.number="form.dealType">
                <el-radio :label="0">本人办理</el-radio>
                <el-radio :label="1">他人代办</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </div>
        <el-col :span="24">
          <el-form-item label="银行卡号" prop="cardNo">
            <el-input v-model="form.cardNo"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="开户行名称" prop="bankTitle">
            <el-input v-model="form.bankTitle"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="姓名">
            <el-input v-model="form.accountTitle"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="身份证号" prop="identity">
            <el-input v-model="form.identity" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="手机号">
            <el-input readonly v-model="form.phone"></el-input>
          </el-form-item>
        </el-col>
        <div v-if="form.dealType!=0">
          <el-col :span="24">
            <el-form-item label="委托书及其附件" prop="attachment">
              <attachment ref="uploadImg" :file-num="6" :file-list="fileList" />
            </el-form-item>
          </el-col>
        </div>
      </el-row>
    </el-form>
    <el-button type="primary" class="btn" @click="checkmsg()">审核</el-button>
    <el-dialog
      title
      v-if="dialogFormVisible"
      :visible.sync="dialogFormVisible"
      width="30%"
      @close="clear"
    >
      <el-form ref="form1" :model="form1" label-width="100px" :rules="rules">
        <el-form-item label="审核" prop="auditStatus" style="magin-left:20px">
          <el-radio-group v-model="form1.auditStatus">
            <el-radio :label="1">审核通过</el-radio>
            <el-radio :label="2">审核驳回</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="驳回原因" v-if="form1.auditStatus==2" prop="auditDesc">
          <el-input v-model="form1.auditDesc" type="textarea" :rows="3"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" center class="dialog-footer">
        <el-button type="primary" @click="cardCheck('form1')">确 定</el-button>
      </div>
    </el-dialog>
  </el-col>
</template>
<script>
import attachment from "@/components/imgUpload/shopImgUp";
import { checkShopInfo, checkShop } from "@/api/shopFinanceCard";

export default {
  components: { attachment },
  data() {
    return {
      loadings: false,
      hospitalId: null,
      dialogFormVisible: false,
      canClick: true, // 添加canClick
      fileList: [],
      ImgUrl: "https://img.yuepinyuemei.com/",
      form: {},
      flag: true,
      form1: {
        auditStatus: null,
        cardId: null,
        phone: "",
        auditDesc: "",
      },
      rules: {
        auditStatus: [
          {
            required: true,
            message: "请选择审核状态",
            trigger: "blur",
          },
        ],
        auditDesc: [
          {
            required: true,
            message: "请输入驳回原因",
            trigger: "blur",
          },
          {
            min: 1,
            max: 30,
            message: "长度在 1 到 30 个字符",
            trigger: "blur",
          },
        ],
      },
      // 银行卡类型下拉列表
      reviewStatusList: [
        // { name: "对公账户", value: "0" },
        { name: "对私账户", value: 2 },
      ],
      bankNameList: [],
    };
  },
  inject: ["reload"],
  mounted() {
    this.form1.cardId = Number(this.$route.query.id);

    this.getInfo();
  },
  methods: {
    // 银行卡添加详情
    getInfo() {
      let datas = {
        id: Number(this.$route.query.id),
      };
      this.loadings = true;
      checkShopInfo(datas)
        .then((res) => {
          if (res.data.code == 0) {
            this.form = res.data.data;
            this.form1.phone = this.form.phone;
            if (this.form.dealType != 0) {
              this.form.attachment = this.form.attachment.split(",");
            }
            // this.form.attachment = this.form.attachment.split(
            //     ","
            // );
            if (this.form.attachment && this.form.dealType != 0) {
              const attachments = this.form.attachment.map((item) => {
                return { url: this.ImgUrl + item };
              });
              this.fileList = attachments;
              this.$nextTick(() => {
                this.$refs.uploadImg.getLength(this.fileList);
              });
            }
          } else {
            this.$message({
              message: res.data.msg,
              type: "warning",
            });
          }
          this.loadings = false;
        })
        .catch((err) => {
          // this.errorStatus(err);
          this.loadings = false;
        });
    },
    checkmsg() {
      this.dialogFormVisible = true;
    },
    clear() {
      this.form1 = {
        auditStatus: null,
        cardId: null,
        auditDesc: "",
      };
    },
    //银行卡审核
    cardCheck(e) {
      this.$refs[e].validate((valid) => {
        if (valid) {
          this.flag = false;
          checkShop(this.form1).then((res) => {
            if (res.data.code == 0) {
              this.flag = true;
              this.$message({
                type: "success",
                message: "提交成功",
              });
              this.$router.push("bankCardCheck");
            }
          });
        } else {
          this.$message({
            message: res.data.msg,
            type: "warning",
          });
          this.flag = true;
        }
      });
    },
    //成功状态弹窗
    succStatus(txt, status) {
      this.eleMsg(txt, "success");
    },
    //失败状态弹窗
    errorStatus(txt) {
      this.eleMsg(txt, "error");
    },
    //弹窗组件
    eleMsg(txt, status) {
      this.$message({
        showClose: true,
        message: txt,
        type: status,
      });
    },
  },
};
</script>
<style scoped>
.app-container {
  padding: 0.1px !important;
}
.titlep {
  font-size: 12px;
  color: #606266;
  margin-bottom: 0;
}
.btn {
  margin: 20px 0 20px 180px;
}
</style>